<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Announcing Vue 3.0 "One Piece" | The Vue Point</title>
    <meta name="description" content="The offical blog for the Vue.js project">
    <link rel="stylesheet" href="static/css/style.b58d2c90.css">
    <link rel="modulepreload" href="https://blog.vuejs.org/assets/app.9f8b31e8.js">
    <link rel="modulepreload" href="https://blog.vuejs.org/assets/posts_vue-3-one-piece.md.156ba32d.lean.js">
    
    <meta name="twitter:site" content="@vuejs">
  <meta name="twitter:card" content="summary">
  <meta name="twitter:image" content="https://vuejs.org/images/logo.png">
  <link rel="icon" type="image/x-icon" href="https://blog.vuejs.org/favicon.ico">
  <script src="static/js/script.js" data-site="NYHGSGQV" data-spa="auto" defer=""></script>
  <meta name="twitter:title" content="Announcing Vue 3.0 &quot;One Piece&quot; | The Vue Point">
  <meta property="og:title" content="Announcing Vue 3.0 &quot;One Piece&quot; | The Vue Point">
  </head>
  <body>
    <div id="app"><div class="antialiased"><div class="max-w-3xl mx-auto px-4 sm:px-6 xl:max-w-5xl xl:px-0"><nav class="flex justify-between items-center py-10 font-bold"><a class="text-xl" href="index10.html" aria-label="The Vue Point"><img class="inline-block mr-2" style="width:36px;height:31px;" alt="logo" src="static/picture/logo1.svg"><span class="hidden md:inline">The Vue Point</span></a><div class="text-sm text-gray-500 leading-5"><a class="hover:text-gray-700" href="javascript:;" target="_blank" rel="noopener"><span class="hidden sm:inline">GitHub </span>Source</a><span class="mr-2 ml-2">·</span><a class="hover:text-gray-700" href="javascript:;">RSS<span class="hidden sm:inline"> Feed</span></a><span class="mr-2 ml-2">·</span><a class="hover:text-gray-700" href="index12.html" target="_blank" rel="noopener">Vuejs.org →</a></div></nav></div><main class="max-w-3xl mx-auto px-4 sm:px-6 xl:max-w-5xl xl:px-0"><article class="xl:divide-y xl:divide-gray-200"><header class="pt-6 xl:pb-10 space-y-1 text-center"><dl><dt class="sr-only">Published on</dt><dd class="text-base leading-6 font-medium text-gray-500"><time datetime="2020-09-18T12:00:00.000Z">September 18, 2020</time></dd></dl><h1 class="text-3xl leading-9 font-extrabold text-gray-900 tracking-tight sm:text-4xl sm:leading-10 md:text-5xl md:leading-14">Announcing Vue 3.0 &quot;One Piece&quot;</h1></header><div class="divide-y xl:divide-y-0 divide-gray-200 xl:grid xl:grid-cols-4 xl:gap-x-10 pb-16 xl:pb-20" style="grid-template-rows:auto 1fr;"><dl class="pt-6 pb-10 xl:pt-11 xl:border-b xl:border-gray-200"><dt class="sr-only">Authors</dt><dd><ul class="flex justify-center xl:block space-x-8 sm:space-x-12 xl:space-x-0 xl:space-y-8"><li class="flex items-center space-x-2"><img src="https://gravatar.com/avatar/eca93da2c67aadafe35d477aa8f454b8" alt="author image" class="w-10 h-10 rounded-full"><dl class="text-sm font-medium leading-5 whitespace-nowrap"><dt class="sr-only">Name</dt><dd class="text-gray-900">Evan You</dd><dt class="sr-only">Twitter</dt><dd><a href="javascript:;" target="_blank" rel="noopnener noreferrer" class="link">@youyuxi</a></dd></dl></li></ul></dd></dl><div class="divide-y divide-gray-200 xl:pb-0 xl:col-span-3 xl:row-span-2"><div style="position:relative;" class="prose max-w-none pt-10 pb-8"><div><p align="center"><img width="200" height="177px" src="static/picture/93624428-53932780-f9ae-11ea-8d16-af949e16a09f.png" alt="one-piece-logo"></p><p>Today we are proud to announce the official release of Vue.js 3.0 &quot;One Piece&quot;. This new major version of the framework provides improved performance, smaller bundle sizes, better TypeScript integration, new APIs for tackling large scale use cases, and a solid foundation for long-term future iterations of the framework.</p><hr><p>The 3.0 release represents over 2 years of development efforts, featuring <a href="javascript:;" target="_blank" rel="noopener noreferrer">30+ RFCs</a>, 2,600+ commits, <a href="javascript:;" target="_blank" rel="noopener noreferrer">628 pull requests</a> from <a href="javascript:;" target="_blank" rel="noopener noreferrer">99 contributors</a>, plus tremendous amount of development and documentation work outside of the core repo. We would like to express our deepest gratitude towards our team members for taking on this challenge, our contributors for the pull requests, our <a href="javascript:;" target="_blank" rel="noopener noreferrer">sponsors and backers</a> for the financial support, and the wider community for participating in our design discussions and providing feedback for the pre-release versions. Vue is an independent project created for the community and sustained by the community, and Vue 3.0 wouldn&#39;t have been possible without your consistent support.</p><h2 id="taking-the-progressive-framework-concept-further" tabindex="-1">Taking the &quot;Progressive Framework&quot; Concept Further <a class="header-anchor" href="#taking-the-progressive-framework-concept-further" aria-hidden="true">#</a></h2><p>Vue had a simple mission from its humble beginning: to be an approachable framework that anyone can quickly learn. As our user base grew, the framework also grew in scope to adapt to the increasing demands. Over time, it evolved into what we call a &quot;Progressive Framework&quot;: a framework that can be learned and adopted incrementally, while providing continued support as the user tackles more and more demanding scenarios.</p><p>Today, with over 1.3 million users worldwide<sup>*</sup>, we are seeing Vue being used in a wildly diverse range of scenarios, from sprinkling interactivity on traditional server-rendered pages, to full-blown single page applications with hundreds of components. Vue 3 takes this flexibility even further.</p><h3 id="layered-internal-modules" tabindex="-1">Layered internal modules <a class="header-anchor" href="#layered-internal-modules" aria-hidden="true">#</a></h3><p>Vue 3.0 core can still be used via a simple <code>&lt;script&gt;</code> tag, but its internals has been re-written from the ground up into <a href="javascript:;" target="_blank" rel="noopener noreferrer">a collection of decoupled modules</a>. The new architecture provides better maintainability, and allows end users to shave off up to half of the runtime size via tree-shaking.</p><p>These modules also exposes lower-level APIs that unlocks many advanced use cases:</p><ul><li>The compiler supports custom AST transforms for build-time customizations (e.g. <a href="javascript:;" target="_blank" rel="noopener noreferrer">build-time i18n</a>)</li><li>The core runtime provides first-class API for creating custom renderers targeting different render targets (e.g. <a href="javascript:;" target="_blank" rel="noopener noreferrer">native mobile</a>, <a href="javascript:;" target="_blank" rel="noopener noreferrer">WebGL</a> or <a href="javascript:;" target="_blank" rel="noopener noreferrer">terminals</a>). The default DOM renderer is built using the same API.</li><li>The <a href="javascript:;" target="_blank" rel="noopener noreferrer"><code>@vue/reactivity</code> module</a> exports functions that provide direct access to Vue&#39;s reactivity system, and can be used as a standalone package. It can be used to pair with other templating solutions (e.g. <a href="javascript:;" target="_blank" rel="noopener noreferrer">lit-html</a>) or even in non-UI scenarios.</li></ul><h3 id="new-apis-for-tackling-scale" tabindex="-1">New APIs for tackling scale <a class="header-anchor" href="#new-apis-for-tackling-scale" aria-hidden="true">#</a></h3><p>The 2.x Object-based API is largely intact in Vue 3. However, 3.0 also introduces the <a href="javascript:;" target="_blank" rel="noopener noreferrer">Composition API</a> - a new set of APIs aimed at addressing the pain points of Vue usage in large scale applications. The Composition API builds on top of the reactivity API and enables logic composition and reuse similar to React hooks, more flexible code organization patterns, and more reliable type inference than the 2.x Object-based API.</p><p>Composition API can also be used with Vue 2.x via the <a href="javascript:;" target="_blank" rel="noopener noreferrer">@vue/composition-api</a> plugin, and there are already Composition API utility libraries that work for both Vue 2 and 3 (e.g. <a href="javascript:;" target="_blank" rel="noopener noreferrer">vueuse</a>, <a href="javascript:;" target="_blank" rel="noopener noreferrer">vue-composable</a>).</p><h3 id="performance-improvements" tabindex="-1">Performance Improvements <a class="header-anchor" href="#performance-improvements" aria-hidden="true">#</a></h3><p>Vue 3 has demonstrated <a href="javascript:;" target="_blank" rel="noopener noreferrer">significant performance improvements</a> over Vue 2 in terms of bundle size (up to 41% lighter with tree-shaking), initial render (up to 55% faster), updates (up to 133% faster), and memory usage (up to 54% less).</p><p>In Vue 3, we have taken the approach of &quot;compiler-informed Virtual DOM&quot;: the template compiler performs aggressive optimizations and generates render function code that hoists static content, leaves runtime hints for binding types, and most importantly, flattens the dynamic nodes inside a template to reduce the cost of runtime traversal. The user therefore gets the best of both worlds: compiler-optimized performance from templates, or direct control via manual render functions when the use case demands.</p><h3 id="improved-typescript-integration" tabindex="-1">Improved TypeScript integration <a class="header-anchor" href="#improved-typescript-integration" aria-hidden="true">#</a></h3><p>Vue 3&#39;s codebase is written in TypeScript, with automatically generated, tested, and bundled type definitions so they are always up-to-date. Composition API works great with type inference. Vetur, our official VSCode extension, now supports template expression and props type checking leveraging Vue 3&#39;s improved internal typing. Oh, and Vue 3&#39;s typing <a href="javascript:;" target="_blank" rel="noopener noreferrer">fully supports TSX</a> if that&#39;s your preference.</p><h3 id="experimental-features" tabindex="-1">Experimental Features <a class="header-anchor" href="#experimental-features" aria-hidden="true">#</a></h3><p>We have proposed <a href="javascript:;" target="_blank" rel="noopener noreferrer">two new features</a> for Singe-File Components (SFC, aka <code>.vue</code> files):</p><ul><li><a href="javascript:;" target="_blank" rel="noopener noreferrer"><code>&lt;script setup&gt;</code>: syntactic sugar for using Composition API inside SFCs</a></li><li><a href="javascript:;" target="_blank" rel="noopener noreferrer"><code>&lt;style vars&gt;</code>: state-driven CSS variables inside SFCs</a></li></ul><p>These features are already implemented and available in Vue 3.0, but are provided only for the purpose of gathering feedback. They will remain experimental until the RFCs are merged.</p><p>We have also implemented a currently undocumented <code>&lt;Suspense&gt;</code> component, which allows waiting on nested async dependencies (async components or component with <code>async setup()</code>) on initial render or branch switch. We are testing and iterating on this feature with the Nuxt.js team (<a href="javascript:;" target="_blank" rel="noopener noreferrer">Nuxt 3 is on the way</a>) and will likely solidify it in 3.1.</p><h2 id="phased-release-process" tabindex="-1">Phased Release Process <a class="header-anchor" href="#phased-release-process" aria-hidden="true">#</a></h2><p>The release of Vue 3.0 marks the general readiness of the framework. While some of the frameworks sub projects may still need further work to reach stable status (specifically router and Vuex integration in the devtools), we believe it&#39;s suitable to start new, green-field projects with Vue 3 today. We also encourage library authors to start upgrading your projects to support Vue 3.</p><p>Check out the <a href="javascript:;" target="_blank" rel="noopener noreferrer">Vue 3 Libraries Guide</a> for details on all framework sub projects.</p><h3 id="migration-and-ie11-support" tabindex="-1">Migration and IE11 Support <a class="header-anchor" href="#migration-and-ie11-support" aria-hidden="true">#</a></h3><p>We have pushed back the migration build (v3 build with v2 compatible behavior + migration warnings) and the IE11 build due to time constraints, and are aiming to focus on them in Q4 2020. Therefore, users planning to migrate an existing v2 app or require IE11 support should be aware of these limitations at this time.</p><h3 id="next-steps" tabindex="-1">Next Steps <a class="header-anchor" href="#next-steps" aria-hidden="true">#</a></h3><p>For the near term after release, we will focus on:</p><ul><li>Migration build</li><li>IE11 support</li><li>Router and Vuex integration in new devtools</li><li>Further improvements to template type inference in Vetur</li></ul><p>For the time being, the documentation websites, GitHub branches, and npm dist tags for Vue 3 and v3-targeting projects will remain under <code>next</code>-denoted status. This means <code>npm install vue</code> will still install Vue 2.x and <code>npm install vue@next</code> will install Vue 3. <strong>We are planning to switch all doc links, branches and dist tags to default to 3.0 in early 2021.</strong></p><p>At the same time, we have started planning for 2.7, which will be the last planned minor release of the 2.x release line. 2.7 will be backporting compatible improvements from v3, and emit warnings on usage of APIs that are removed/changed in v3 to help with potential migration. We are planning to work on 2.7 in Q1 2021, which will directly become LTS upon release with an 18 months maintenance lifespan.</p><h2 id="trying-it-out" tabindex="-1">Trying It Out <a class="header-anchor" href="#trying-it-out" aria-hidden="true">#</a></h2><p>To learn more about Vue 3.0, check out our <a href="index12.html" target="_blank" rel="noopener noreferrer">new documentation website</a>. If you are an existing Vue 2.x user, go directly to the <a href="javascript:;" target="_blank" rel="noopener noreferrer">Migration Guide</a>.</p><hr><ul><li>*based on <a href="javascript:;" target="_blank" rel="noopener noreferrer">Vue Devtools Chrome extension</a> weekly active users as reported by Google.</li></ul></div></div></div><footer class="text-sm font-medium leading-5 divide-y divide-gray-200 xl:col-start-1 xl:row-start-2"><div class="py-8"><h2 class="text-xs tracking-wide uppercase text-gray-500"> Next Article </h2><div class="link"><a href="hello-2021.html">Reflections for 2020-2021</a></div></div><!----><div class="pt-8"><a class="link" href="index10.html">← Back to the blog</a></div></footer></div></article></main></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"index.md\":\"b0a39757\",\"posts_hello-2021.md\":\"28bcda93\",\"posts_vue-3-as-the-new-default.md\":\"48a17eee\",\"posts_vue-3-one-piece.md\":\"156ba32d\",\"posts_vue-3.2.md\":\"b25d09af\"}")</script>
    <script type="module" async="" src="static/js/app.9f8b31e8.js"></script>
    
  </body>
</html>